<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>简历 | 刘华夏</title>
    <style rel="stylesheet">a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
        margin: 0;
        padding: 0;
        border: 0;
        font: inherit;
        font-size: 100%;
        vertical-align: baseline
    }

    html {
        line-height: 1
    }

    ol, ul {
        list-style: none
    }

    table {
        border-collapse: collapse;
        border-spacing: 0
    }

    caption, td, th {
        text-align: left;
        font-weight: 400;
        vertical-align: middle
    }

    blockquote, q {
        quotes: none
    }

    blockquote:after, blockquote:before, q:after, q:before {
        content: "";
        content: none
    }

    a img {
        border: none
    }

    elements-of-type
    (
    html5-block

    )
    {
        display: block
    }
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        user-select: none
    }

    body {
        color: #333;
        font-size: 14px;
        line-height: 1.5;
        font-family: Helvetica Neue, Helvetica, Arial, Microsoft YaHei, sans-serif;
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: none;
        background-color: #eee;
        overflow: auto;
        padding-top: 5px
    }

    @media screen and (max-width: 1024px) {
        body {
            padding-top: 0
        }
    }

    a {
        text-decoration: none;
        color: #00b38a;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out
    }

    .last-modified {
        position: absolute;
        top: 30px;
        left: 50%;
        width: 1000px;
        color: #bbb;
        margin-left: -500px;
        font-size: 12px;
        text-align: right
    }

    @media screen and (max-width: 1024px) {
        .last-modified {
            display: none
        }
    }

    @media print {
        .last-modified {
            display: none
        }
    }

    .download-pdf {
        position: absolute;
        top: 30px;
        left: 50%;
        margin-left: -500px;
        font-size: 12px;
        text-align: right
    }

    @media screen and (max-width: 1024px) {
        .download-pdf {
            display: none
        }
    }

    @media print {
        .download-pdf {
            display: none
        }
    }

    .content {
        position: relative;
        width: 1024px;
        margin: 50px auto;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
        background-color: #fff;
        overflow: hidden
    }

    @media screen and (max-width: 1024px) {
        .content {
            width: 100%;
            margin: 0;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            -ms-border-radius: 0;
            -o-border-radius: 0;
            border-radius: 0
        }
    }

    .content-hd {
        width: 100%;
        padding: 30px 50px;
        color: #fff;
        background-color: #00b38a;
        overflow: hidden
    }

    @media screen and (max-width: 720px) {
        .content-hd {
            padding: 25px 30px
        }
    }

    @media print {
        .content-hd {
            color: #000;
            background-color: #fff
        }
    }

    .content-hd .title {
        width: 100%;
        border-bottom: 2px solid #00a982;
        font-size: 52px;
        font-weight: 300;
        overflow: hidden;
        padding-bottom: 5px;
        margin-bottom: 5px
    }

    .content-hd .contact, .content-hd .info, .content-hd .job, .content-hd .name {
        width: 50%
    }

    @media screen and (max-width: 720px) {
        .content-hd .contact, .content-hd .info, .content-hd .job, .content-hd .name {
            width: 100%;
            text-align: center
        }
    }

    .content-hd .name {
        float: left
    }

    .content-hd .name h1 {
        font-family: Lucida Grande, Hiragino Sans GB, Hiragino Sans GB W3, Helvetica Neue, Helvetica, Arial, Microsoft YaHei, sans-serif;
        font-weight: 500;
        letter-spacing: 5px
    }

    @media screen and (max-width: 720px) {
        .content-hd .name h1 {
            letter-spacing: 0;
            line-height: 1.25;
            margin-top: 10px
        }
    }

    .content-hd .name h1 small {
        font-weight: 400;
        letter-spacing: 0;
        font-size: 24px;
        padding-left: 10px
    }

    @media screen and (max-width: 720px) {
        .content-hd .name h1 small {
            display: block;
            padding-left: 0;
            font-size: 20px;
            line-height: 1
        }
    }

    .content-hd .job {
        float: right;
        text-align: right
    }

    @media screen and (max-width: 720px) {
        .content-hd .job {
            text-align: center
        }
    }

    .content-hd .job h2 {
        display: inline-block;
        font-size: 24px
    }

    @media screen and (max-width: 720px) {
        .content-hd .job h2 {
            border-top: 1px solid #00a982;
            margin: 5px auto 0;
            padding: 10px
        }
    }

    .content-hd .info {
        float: left;
        line-height: 22px
    }

    .content-hd .contact {
        float: right;
        text-align: right;
        padding-right: 5px
    }

    .content-hd .contact ul {
        margin: 8px 0 4px
    }

    @media screen and (max-width: 720px) {
        .content-hd .contact ul {
            text-align: center;
            margin: 16px 0 0
        }
    }

    .content-hd .contact ul > li {
        height: 22px
    }

    @media screen and (max-width: 720px) {
        .content-hd .contact ul > li {
            display: inline-block
        }
    }

    .content-hd .contact ul > li > a {
        color: #fff;
        font-family: Lucida Grande, Hiragino Sans GB, Hiragino Sans GB W3, Helvetica Neue, Helvetica, Arial, Microsoft YaHei, sans-serif;
        font-size: 14px;
        line-height: 22px
    }

    @media print {
        .content-hd .contact ul > li > a {
            color: #000
        }
    }

    .content-hd .contact ul > li > a:hover {
        color: #e8e8e8
    }

    @media screen and (max-width: 720px) {
        .content-hd .contact ul > li > a .contact-link {
            display: none
        }
    }

    .content-hd .contact ul > li > a .iconfont {
        fill: #fff;
        vertical-align: text-top
    }

    @media screen and (max-width: 720px) {
        .content-hd .contact ul > li > a .iconfont {
            margin: 5px 8px
        }
    }

    .content-bd {
        width: 100%;
        min-height: 200px;
        padding: 20px 30px 0px;
        overflow: hidden
    }

    @media screen and (max-width: 720px) {
        .content-bd {
            padding: 20px 20px 50px
        }
    }

    .content-bd .content-left, .content-bd .content-right {
        width: 50%
    }

    @media screen and (max-width: 1024px) {
        .content-bd .content-left, .content-bd .content-right {
            width: 100%
        }
    }

    .content-bd .content-left {
        float: left
    }

    .content-bd .content-right {
        float: right
    }

    .content-bd section {
        overflow: hidden;
        padding: 10px 15px
    }

    .content-bd .section-hd {
        position: relative;
        height: 32px;
        margin: 10px auto 5px;
        overflow: hidden
    }

    .content-bd .section-bd {
        overflow: hidden
    }

    .content-bd .section-bd ul li {
        margin-top: 8px;
        list-style: square inside
    }

    .content-bd .section-bd .item {
        margin-bottom: 20px
    }

    .content-bd .section-title-l, .content-bd .section-title-r {
        position: absolute;
        top: 50%;
        display: inline-block;
        width: 35%;
        height: 0;
        vertical-align: middle;
        border-top: 1px solid #ededed
    }

    .content-bd .section-title-l {
        left: 0
    }

    .content-bd .section-title-r {
        right: 0
    }

    .content-bd .section-title {
        position: relative;
        z-index: 1;
        width: 24%;
        min-width: 100px;
        margin: 0 auto;
        padding: 4px 10px;
        -webkit-border-radius: 32px;
        -moz-border-radius: 32px;
        -ms-border-radius: 32px;
        -o-border-radius: 32px;
        border-radius: 32px;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        background-color: #eee
    }

    .content-bd .section-list {
        padding: 10px 0 5px
    }

    .content-bd .item-hd {
        position: relative;
        padding: 10px 0 5px;
        line-height: 20px;
        overflow: hidden;
        font-weight: 500;
        min-height: 30px
    }

    .content-bd .item-hd .item-time {
        display: inline-block;
        float: left;
        width: 25%
    }

    @media screen and (max-width: 720px) {
        .content-bd .item-hd .item-time {
            width: 100%;
            margin-bottom: 5px
        }
    }

    .content-bd .item-hd .item-more {
        position: absolute;
        top: 10px;
        right: 0
    }

    .content-bd .item-hd .item-name {
        float: left
    }

    .content-bd .item-bd {
        margin-bottom: 5px
    }

    .content-bd .item-des {
        margin-bottom: 16px
    }

    .content-bd .section-content {
        text-align: justify;
        word-break: break-all;
        line-height: 22px
    }

    .content-bd .section-content em {
        display: inline-block;
        font-family: Menlo, Helvetica Neue, Helvetica, Arial, Microsoft YaHei, sans-serif;
        font-size: 12px;
        line-height: 14px;
        border: 1px solid #d1d1d1;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
        margin: 2px;
        padding: 0 3px;
        background-color: #f7f7f7
    }

    .content-bd .section-content strong {
        font-family: Helvetica Neue, Helvetica, Arial, Microsoft YaHei, sans-serif;
        font-size: 12px;
        line-height: 14px;
        border: 1px solid #f3f3f3;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
        font-weight: 500;
        color: #444;
        margin: 2px;
        padding: 0 3px;
        background-color: #f6f6f6
    }

    .content-bd .practice .item-time {
        width: 100%
    }

    .btn {
        display: inline-block;
        padding: 0 5px;
        border: 1px solid #00b38a;
        border-radius: 3px;
        color: #00b38a;
        font-family: Menlo, Helvetica Neue, Helvetica, Arial, Microsoft YaHei, sans-serif;
        font-size: 14px;
        line-height: 18px;
        text-align: center
    }

    .btn:hover {
        color: #fff;
        background-color: #00b38a
    }

    .github-footer {
        text-align: center
    }

    .github-footer .footer-link {
        display: inline-block;
        color: #d1d1d1;
        margin-bottom: 25px
    }

    @media screen and (max-width: 1024px) {
        .github-footer .footer-link {
            margin-top: 25px
        }
    }

    @media print {
        .github-footer {
            display: none
        }
    }</style>
    <base target="_blank">
</head>
<body>
<a class="download-pdf" download href="img/个人简历.pdf">下载 PDF</a>
<main class="content">

    <!--基本信息-->
    <header class="content-hd">
        <section class="title">
            <div class="name">
                <h1>刘华夏</h1>
            </div>
            <div class="job">
                <h2>Web前端开发工程师</h2>
            </div>
        </section>
        <section class="info">
            <ul>
                <li>男 / 河南南阳 / 1992.11.08</li>
                <li>洛阳理工学院</li>
                <li>本科(统招二本) / 2016年毕业</li>
                <li>5年前端开发工作经验</li>
            </ul>
        </section>
        <section class="contact">
            <ul>
                <li>
                    <a>
                        <span class="contact-link">LHX19921108</span>
                        <span class="iconfont">
            <svg t="1606570166353" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="1854" width="16" height="16"><path
                    d="M498.816 345.056c26.336 0 43.936-17.632 43.936-43.904 0-26.56-17.568-43.744-43.936-43.744s-52.832 17.184-52.832 43.744C446.016 327.424 472.48 345.056 498.816 345.056zM253.088 257.408c-26.336 0-52.96 17.184-52.96 43.744 0 26.272 26.624 43.904 52.96 43.904 26.24 0 43.808-17.632 43.808-43.904C296.864 274.592 279.328 257.408 253.088 257.408zM1024 626.112c0-138.88-128.832-257.216-286.976-269.536 0.224-1.728 0.32-3.52-0.064-5.312-31.712-147.84-190.688-259.296-369.824-259.296C164.704 91.968 0 233.12 0 406.624c0 93.088 47.52 176.96 137.568 243.104l-31.392 94.368c-2.016 6.144-0.192 12.896 4.704 17.152 2.976 2.56 6.72 3.904 10.496 3.904 2.432 0 4.896-0.576 7.168-1.696L246.4 704.48l14.528 2.944c36.288 7.456 67.616 13.92 106.208 13.92 11.36 0 22.88-0.512 34.176-1.472 4.576-0.384 8.448-2.688 11.072-6.016 42.496 106.336 159.616 183.104 297.44 183.104 35.296 0 71.04-8.512 103.104-16.544l90.848 49.664c2.4 1.312 5.056 1.984 7.68 1.984 3.584 0 7.168-1.216 10.048-3.552 5.056-4.096 7.136-10.848 5.248-17.024l-23.2-77.152C981.344 772.864 1024 699.328 1024 626.112zM398.592 687.968c-10.4 0.896-20.96 1.344-31.424 1.344-35.328 0-65.216-6.112-99.776-13.248L247.296 672c-3.456-0.736-7.104-0.256-10.272 1.376l-88.288 44.192 22.944-68.928c2.24-6.752-0.224-14.112-6.016-18.176C76.96 568.64 32 493.312 32 406.624c0-155.84 150.336-282.656 335.136-282.656 163.36 0 308 99.392 337.856 231.584-171.296 2.24-309.888 122.656-309.888 270.56 0 21.504 3.264 42.336 8.768 62.432C402.208 688.128 400.448 687.808 398.592 687.968zM875.456 815.552c-5.344 4.032-7.616 10.976-5.696 17.376l15.136 50.336-62.112-33.984c-2.368-1.312-5.024-1.984-7.68-1.984-1.312 0-2.624 0.16-3.904 0.512-33.312 8.416-67.776 17.088-101.344 17.088-155.904 0-282.72-107.136-282.72-238.816 0-131.68 126.816-238.784 282.72-238.784 152.928 0 282.144 109.344 282.144 238.784C992 691.744 950.624 759.04 875.456 815.552zM612.992 511.968c-17.568 0-35.136 17.696-35.136 35.232 0 17.664 17.568 35.104 35.136 35.104 26.4 0 43.84-17.44 43.84-35.104C656.832 529.632 639.392 511.968 612.992 511.968zM806.016 511.968c-17.312 0-34.88 17.696-34.88 35.232 0 17.664 17.568 35.104 34.88 35.104 26.304 0 44.064-17.44 44.064-35.104C850.08 529.632 832.352 511.968 806.016 511.968z"
                    p-id="1855"></path></svg>
            </span>
                    </a>
                </li>
                <li>
                    <a href="mailto:271378333@qq.com">
                        <span class="contact-link">271378333@qq.com</span>
                        <span class="iconfont">
              <svg width="16px" height="16px" viewBox="0 0 1024 1024">
                <path
                        d="M903.808 239.04l-818.304 0 0 545.92 852.992 0 0-545.92-34.688 0zM869.664 273.152l-329.536 329.536c-15.04 15.04-41.248 15.04-56.288 0l-329.6-329.536 715.392 0zM119.616 286.752l221.536 221.504-221.536 221.536 0-443.072zM146.848 750.848l218.464-218.432 94.432 94.4c13.952 13.952 32.512 21.664 52.256 21.664s38.304-7.712 52.256-21.664l94.432-94.432 218.432 218.432-730.304 0zM904.384 729.824l-221.536-221.568 221.536-221.568 0 443.136z"></path>
              </svg>
            </span>
                    </a>
                </li>
                <li>
                    <a href="tel:18638356994">
                        <span class="contact-link">18638356994</span>
                        <span class="iconfont">
              <svg width="16px" height="16px" viewBox="0 0 1024 1024">
                <path
                        d="M256 1024l512 0c26.464 0 48-21.536 48-48l0-928c0-26.464-21.536-48-48-48l-512 0c-26.464 0-48 21.536-48 48l0 928c0 26.464 21.536 48 48 48zM240 48c0-8.832 7.168-16 16-16l512 0c8.832 0 16 7.168 16 16l0 928c0 8.832-7.168 16-16 16l-512 0c-8.832 0-16-7.168-16-16l0-928zM288 864l448 0c8.832 0 16-7.168 16-16l0-672c0-8.832-7.168-16-16-16l-448 0c-8.832 0-16 7.168-16 16l0 672c0 8.832 7.168 16 16 16zM304 192l416 0 0 640-416 0 0-640zM496 928c0 17.664 14.336 32 32 32s32-14.336 32-32c0-17.664-14.336-32-32-32-17.664 0-32 14.336-32 32zM448 128l128 0c8.832 0 16-7.168 16-16s-7.168-16-16-16l-128 0c-8.832 0-16 7.168-16 16s7.168 16 16 16z"></path>
              </svg>
            </span>
                    </a>
                </li>
            </ul>
        </section>
    </header>

    <div class="content-bd">

        <div class="content-left">

            <section class="practice">
                <header class="section-hd">
                    <span class="section-title-l"></span>
                    <h2 class="section-title">经历</h2>
                    <span class="section-title-r"></span>
                </header>
                <div class="section-bd">

                    <!--经历:工作-->
                    <div class="item">
                        <header class="item-hd">
                            <h3 class="item-name">杭州海康威视数字技术股份有限公司</h3>
                            <span class="item-time">2019.11 ~ 2022.03</span>
                            <a class="btn item-more">工作</a>
                        </header>
                        <div class="item-bd">
                            <p class="item-des">在国际营销部门承接的各种海康威视海外项目中负责的前端开发工作</p>
                            <!--              <ul class="section-content">-->
                            <!--                <li>负责团队基础技术支撑，包含构建流程、工具包、新技术(如SW)探索实践等</li>-->
                            <!--                <li>主导和开发团队基础UI组件库，支撑业务快速迭代、统一视觉规范</li>-->
                            <!--                <li>推进ReactNative在管家App中的落地，打通RN2Web</li>-->
                            <!--                <li>报表项目主R，跟进项目迭代和任务分配，设计和开发报表框架提升报表开发效率</li>-->
                            <!--                <li>校园与社招技术面试</li>-->
                            <!--              </ul>-->
                        </div>
                    </div>
                    <div class="item">
                        <header class="item-hd">
                            <h3 class="item-name">吉利控股集团有限公司(od)</h3>
                            <span class="item-time">2017.11 至 2019.11</span>
                            <a class="btn item-more">工作</a>
                        </header>
                        <div class="item-bd">
                            <p class="item-des">在吉利集团实施交付部门主要为吉利HR部门提供系统的前端开发工作</p>
                        </div>
                    </div>
                    <div class="item">
                        <header class="item-hd">
                            <h3 class="item-name">百牛科技</h3>
                            <span class="item-time">2016.08 至 2017.09</span>
                            <a class="btn item-more">工作</a>
                        </header>
                        <div class="item-bd">
                            <p class="item-des">在创业公司使用ThinkPHP框架和smarty模板引擎进行php项目二次开发</p>
                        </div>
                    </div>
                </div>
            </section>
            <section class="skill">
                <header class="section-hd">
                    <span class="section-title-l"></span>
                    <h2 class="section-title">技能</h2>
                    <span class="section-title-r"></span>
                </header>
                <div class="section-bd">

                    <!--技能:JS-->
                    <div class="item">
                        <header class="item-hd">
                            <span class="item-time">Web</span>
                            <a class="btn item-more">精通</a>
                        </header>
                        <div class="item-bd">
                            <ul class="section-content">
                                <li>熟知JS基本语法与知识，ES5/ES6/TS 语法，代码风格简洁规范</li>
                                <li>掌握网页重构所需的CSS、LESS、SCSS</li>
                                <li>在pc端和web移动端都有项目经验，理解响应式布局和rem弹性布局</li>
                            </ul>
                        </div>
                    </div>

                    <!--React-->
                    <div class="item">
                        <header class="item-hd">
                            <span class="item-time" style="width: 40%">MVVM框架(Vue,React)</span>
                            <a class="btn item-more">精通</a>
                        </header>
                        <div class="item-bd">
                            <ul class="section-content">
                                <li>熟练运用 Vue-cli3.0 + Vuex + Vue-router + Axios 及其他第三方库进行工程构建</li>
                                <li>熟练使用 ElementUI，iview，vant等主流 UI 框架完成PC及移动端页面构建及组件的二次封装</li>
                            </ul>
                        </div>
                    </div>
                    <!--Webpack-->
                    <div class="item">
                        <header class="item-hd">
                            <span class="item-time">数据可视化</span>
                            <a class="btn item-more">熟练</a>
                        </header>
                        <div class="item-bd">
                            <ul class="section-content">
                                <li>在多个实际项目中使用Echarts，Antv解决数据可视化</li>
                            </ul>
                        </div>
                    </div>

                    <!--Webpack-->
                    <div class="item">
                        <header class="item-hd">
                            <span class="item-time">Webpack</span>
                            <a class="btn item-more">熟练</a>
                        </header>
                        <div class="item-bd">
                            <ul class="section-content">
                                <li>在多个实际项目的构建工具</li>
                                <li>熟知Webpack原理，使用各种Webpack Plugin & Loader</li>
                            </ul>
                        </div>
                    </div>
                    <!--数据库-->
                    <div class="item">
                        <header class="item-hd">
                            <span class="item-time">数据库&后端语言</span>
                            <a class="btn item-more">掌握</a>
                        </header>
                        <div class="item-bd">
                            <ul class="section-content">
                                <li>对MongoDB，MySQL有一定的了解</li>
                                <li>node,PHP,java有一定的了解</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
            <section class="skill">
                <header class="section-hd">
                    <span class="section-title-l"></span>
                    <h2 class="section-title">积累</h2>
                    <span class="section-title-r"></span>
                </header>
                <div class="section-bd">

                    <!--技能:JS-->
                    <div class="item">
                        <header class="item-hd">
                            <a class="btn btns right" href="http://liuhuaxia.gitee.io/eharts-extend">图表展示</a>
                            <a class="btn item-mores" href="http://liuhuaxia.gitee.io/eharts-extend">常用图表二次封装</a>
                        </header>
                        <div class="item-bd">
                            <ul class="section-content">
                                <li>针对项目中使用echarts需要特殊修改和经常遇到的功能进行封装</li>
                                <li>label文本过长时自动显示...并显示title</li>
                                <li>图例过多自动分页或后面图例合并展示为other</li>
                                <li>tooltip添加点击事件</li>
                                <li>各类图表接收的数据结构进行统一</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
        </div>


        <div class="content-right">
            <section class="project">
                <header class="section-hd">
                    <span class="section-title-l"></span>
                    <h2 class="section-title">项目</h2>
                    <span class="section-title-r"></span>
                </header>
                <div class="section-bd">

                    <!--项目:Webpack-->
                    <div class="item">
                        <header class="item-hd">
                            <a class="btn btns right" href="https://gitee.com/liuhuaxia/resume/raw/master/ocdvs.png">静态项目展示</a>
                            <a class="btn item-mores" href="https://gitee.com/liuhuaxia/resume/raw/master/ocdvs.png">教育3D可视化看板</a>
                        </header>
                        <div class="item-bd">
                            <ul>
                                <li>海外教育基线产品中的组件，用于学校大屏看板上进行展示各种可视化统计信息</li>
                                <li>独立负责前端开发,项目使用vue-cli3.0框架</li>
                                <li>看板背景由u3d同事开发的动画背景，看板两侧图表使用echarts和canvas进行开发，每个图表都有动画效果，通过点击u3d上不同的位置进行不同图表的切换展示，整个看板给人3d感十足</li>
                            </ul>
                        </div>
                    </div>

                    <!--项目:React-->
                    <div class="item">
                        <header class="item-hd">
                            <a class="btn btns right" href="https://gitee.com/liuhuaxia/power/raw/master/power.png">静态项目展示</a>
                            <a class="btn item-mores" href="https://gitee.com/liuhuaxia/power/raw/master/power.png">HikCentral iVisual-UI Power</a>
                        </header>
                        <div class="item-bd">
                            <ul>
                                <li>对部门开发的各种可视化看板进行融合配置管理</li>
                                <li>独立负责前端开发和接口数据结构设计,项目使用vue-cli3.0框架</li>
                                <li>该项目展示用户购买过的单个可视化看板(教育类,物流类,交通类,园区类等基础看板)，用户点击可快速进入
                                    看板，用户也可以把自己所购买的基础看板进行组合，使看板之间进行自由联动，支持轮播模式和跳转模式，可以进行看板顺序调整，看板停留时间，看板跳转地址和点击位置设置，同时支持预览，配置过程中运用了大量拖拽，方便用户进行配置，支持国际化</li>
                            </ul>
                        </div>
                    </div>
                    <!--项目:React-->
                    <div class="item">
                        <header class="item-hd">
                            <a class="btn btns right" href="http://liuhuaxia.gitee.io/map">项目展示</a>
                            <a class="btn item-mores" href="http://liuhuaxia.gitee.io/map">交通移动执法指挥项目</a>
                        </header>
                        <div class="item-bd">
                            <ul>
                                <li>指挥中心对现场执法人员进行语音指挥的地图项目</li>
                                <li>独立负责前端开发,项目使用vue-cli3.0框架,地图使用OpenLayers渲染操作</li>
                                <li>项目可以实时观察执法人员的在地图位置，点击执法人员图标可以进行轨迹查看，执法记录仪的回访，实时预览和语音对讲，采用websocket接收执法人员的报警信息，方便指挥中心快速处理问题</li>
                            </ul>
                        </div>
                    </div>
                    <!--项目:Golang-->
                    <div class="item">
                        <header class="item-hd">
                            <span class="btn item-mores">吉利集团绩效系统（PC+移动）</span>
                        </header>
                        <div class="item-bd">
                            <ul>
                                <li>
                                    此项目用于吉利集体员工的KPI评审，吉利员工绩效评审模式分为KPI、OS、OKR、CV、加减分五种，吉利各个的子公司根据需要选择评审模式，PC端分为员工界面和后台审核界面，移动端只有员工界面
                                </li>
                                <li>
                                    负责项目前端框架搭建,我的绩效，下属绩效（正式+试用），管理员绩效审核（部门+公司+试用），绩效申诉，消息模版，字典管理页面的开发
                                </li>
                                <li>
                                    使用element ui(pc)，vant(移动) 作为基础ui框架； 使用vue-i18n国际化中英双语
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!--项目:Nodejs-->
                    <div class="item">
                        <header class="item-hd">
                            <span class="btn item-mores">吉利人事共享中心（PC+移动）</span>
                        </header>
                        <div class="item-bd">
                            <ul>
                                <li>
                                    吉利人事共享项目是ehr项目和吉伴伴系统的重构的项目，使用最新的vue-cli3.0前端框架，项目主要是新员工录入和新员工录入审核，生成工号，短信平台，薪资查询，工单办理等满足员工自助查询的平台
                                </li>
                                <li>
                                    使用Vue+element UI+Vant 进行重构，提高用户体验；使用 vue-router、vuex
                                    实现项目路由与状态管理；利用axios发送请求，实现组件之间的数据交互
                                </li>
                                <li>
                                    使用antv可视化数据
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="item">
                        <header class="item-hd">
                            <span class="btn item-mores">吉利OKR项目管理系统</span>
                        </header>
                        <div class="item-bd">
                            <ul>
                                <li>
                                    此项目主要用于吉利公司信息工程,独立负责此项目前端工作
                                </li>
                                <li>
                                    主要使用vue全家桶作为项目基础框架，采用Element ui 作为ui框架 以便调高开发速度
                                </li>
                                <li>
                                    使用v-charts作可视化报表
                                </li>
                            </ul>
                        </div>
                    </div>
<!--                    <div class="item">-->
<!--                        <header class="item-hd">-->
<!--                            <span class="btn item-mores">维护和二次开发项目</span>-->
<!--                        </header>-->
<!--                        <div class="item-bd">-->
<!--                            <ul>-->
<!--                                <li>-->
<!--                                    Ehr、吉伴伴、吉点点、吉淘淘项目维护-->
<!--                                </li>-->
<!--                                <li>-->
<!--                                    海康spec管理平台（摄像头规格参数组装平台）二次开发，日常维护和开发-->
<!--                                </li>-->
<!--                                <li>-->
<!--                                    海康流程系统开发：配置管理支持单流程，器件安规认证流程，研发库废料处理流程，环保自声明申请流程-->
<!--                                </li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                    </div>-->
                </div>
            </section>
        </div>
    </div>
</main>
</body>
<style>
    .item-mores{
        position: absolute;
        left: 0;
    }
    .right{
        float: right;
    }
    .btns{
        border: none!important;
    }
</style>
</html>
